import { Button, Typography, Card, Tag, Divider } from "antd";
import { ClockCircleOutlined, UserOutlined, CalendarOutlined } from "@ant-design/icons";

//每一周的排班详情模态框
export const DateDetailsModal = (props) => {
  const { data: dateSchedules} = props;
  
  // 检查是否有排班数据
  const hasSchedules = dateSchedules && dateSchedules.length > 0;

  return (
    <div className="modal-box" style={{height:400}}>
    

      {/* 休息时间提示卡片 */}
      <Card className="rest-time-card mb-6">
        <div className="flex items-center">
          <ClockCircleOutlined className="text-warning mr-2" />
          <Typography.Text>
            <strong> 休息时间：</strong>
            中午 12:00-14:00 | 傍晚 17:00-18:00
          </Typography.Text>
        </div>
      </Card>

      {hasSchedules ? (
        <div className="schedules-container">
          {dateSchedules.map((schedule) => (
            <Card 
              key={schedule.id} 
              className="schedule-card mb-4 hover:shadow-md transition-all duration-300"
            >
              <div className="schedule-header mb-3">
                <div className="flex justify-between items-center">
                  <Typography.Title level={5} className="schedule-title">
                    {schedule.timeSlot}
                  </Typography.Title>
                  <Tag color="blue" className="time-range-tag">
                    {schedule.timeRange}
                  </Tag>
                </div>
                <Divider className="schedule-divider" />
              </div>

              {/* 员工列表 */}
              <div className="doctors-grid">
                {schedule.doctors.length > 0 ? (
                  schedule.doctors.map((doctor, index) => (
                    <Card 
                      key={`${doctor.id}-${index}`} 
                      className="doctor-card hover:border-primary transition-all duration-200"
                    >
                      <div className="doctor-info">
                        <div className="doctor-avatar">
                          <UserOutlined className="avatar-icon" />
                        </div>
                        <div className="doctor-details">
                          <Typography.Text strong className="doctor-name">
                            {doctor.name}
                          </Typography.Text>
                          <Typography.Text className="doctor-treatment">
                            {doctor.treatment}
                          </Typography.Text>
                        </div>
                      </div>
                    </Card>
                  ))
                ) : (
                  <div className="no-doctors">
                    <Typography.Text type="secondary">
                      该时段暂无员工安排
                    </Typography.Text>
                  </div>
                )}
              </div>
            </Card>
          ))}
        </div>
      ) : (
        <div className="no-schedules-container text-center py-10">
          <CalendarOutlined className="empty-icon" />
          <Typography.Title level={5} className="empty-title mt-3">
            暂无排班安排
          </Typography.Title>
          <Typography.Text type="secondary" className="empty-subtitle">
            该日期没有任何排班计划，请添加排班
          </Typography.Text>
          <Button 
            type="primary" 
            className="add-schedule-btn mt-4"
            onClick={() => {
              // 这里可以添加新建排班的逻辑
              props.onAddSchedule?.();
            }}
          >
            新增排班
          </Button>
        </div>
      )}

   
    </div>
  );
};